<template>
	<view class="container">
		<!-- 音频容器 -->
		<view class="otherAudio"  :id="chatId + '_audio'"></view>
		<!-- 视频容器 -->
		<view class="otherVideo"  :id="chatId + '_video'"></view>
		<!-- 我的视频窗口 -->
		<view class="myVideo" v-show="(rtcType == 'video'||rtcType == 'videod') && camera" :id="user.id+ '_video'"></view>
		
		<!-- 用户信息 -->
		<view class="u-info" v-if="isShowUinfo">
			<u-avatar size="60" :src="configs.avatarUrl+'/' + chatId+'.jpg'"></u-avatar>
			<view class="u-name">
				{{userName}}
			</view>
			<view class="noticeTxt" v-if="!palyingEnd">{{noticeTxt}}</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="operate-box">
			<view class="time-box" v-if="palyingEnd">
				<timer ref="timer" />
			</view>
			
			<view class="op-box">
				<!-- 麦克风按钮 -->
				<div class="roundicon bg-white voiceBtnIn btn-icon"
				:class="microphone?'text-black':'text-red'"
				@click="handleMic" v-if="palyingEnd">
				  <span class="cuIcon-voicefill"></span>
				</div>
				
				<!-- 取消按钮-->
				<view class="roundicon bg-red rotate btn-icon" @click="cancleBtn">
				  <span class="cuIcon-dianhua"></span>
				</view>
				<!-- 接听按钮 -->
				<div v-if="!isPlayer && !palyingEnd" class="roundicon bg-limegreen btn-icon" @click="sureBtn">
				  <span class="cuIcon-recordfill" v-if="(rtcType == 'video'||rtcType == 'videod')"></span>
				  <span class="cuIcon-dianhua" v-else></span>
				</div>
				
				<!-- 视频控制 -->
				<view class="roundicon bg-white speakBtnIn btn-icon"
				:class="camera?'text-black':'text-red'"
				@click="handleCamrea" v-if="palyingEnd&&(rtcType == 'video'||rtcType == 'videod')">
				  <span class="cuIcon-recordfill"></span>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
import * as API_liveKit from '@/api/livekit'
import { livekit_main_implementation } from './js/livekit_main_implementation'
import {
    livekit_main,
    stopMeetting,
    closeMeettingCamera,
    closeMeettingMic,
    shareScreen
} from './js/index'
import {
		mapGetters
	} from 'vuex';
import core from '@/core';
import store from '@/store';
import timer from './timer.vue'
import configs from '@/config/config'
export default {
	components:{timer},
	computed:{
		...mapGetters(['user']),
		isShowUinfo(){
			if(this.rtcType == 'voice' || this.rtcType == 'voiced') return true;
			if(!this.otherVideo) return true;
			return false;
		}
	},
	data() {
		return {
			theme: core.style,
			configs: configs,
			
			chatId:null,
			rtcType:'voice',
			type:null,
			// 是否开启麦克风
			microphone:true,
			// 是否开启摄像头
			camera:true,
			// 对方是否开启视频
			otherVideo:false,
			// 对方是否开启语音
			otherVoice:false,
			roomTag:null,
			roomToken:null,
			// 对方是否进入房间-是否接通
			palyingEnd:false,
			// 是否是拨打方
			isPlayer:true,
			// userInfo:{},
			
			userName:'',
			noticeTxt:'',
		};
	},
	watch:{
		palyingEnd(v){
			if(v){
				this.$nextTick(()=>{
					this.$refs.timer&&this.$refs.timer.begin();
				})
			} 
		}
	},
	async onLoad(op) {
		this.liveKitInit();
		this.chatId = op.chatid;
		this.type = op.type;
		this.roomTag = op.roomTag;
		this.userName = op.name;
		// this.userInfo = await findUser(this.chatId)
		// this.userInfo = this.userList.find(item => item.id == this.chatId)
		this.initLivekit();
	},
	onUnload() {
		uni.$off('liveKitSingleRegect');
		uni.$off('liveKitSingleCancel');
		uni.$off('liveKitSingLing');
		uni.$off('liveKitAccept');
		uni.$off('liveKitSinglehangUp');
	},
	methods:{
		async initLivekit(){
			this.palyingEnd = false;
			if(this.type == 'voice' || this.type == 'video'){
				// 开始拨打
				let data = {
					targetId:this.chatId,
					type : this.type == 'voice'? 'audio' : 'video'
				}
				this.isPlayer = true;
				this.camera = this.type == 'video';
				this.rtcType = this.type == 'video'?'video' :'voice'
				let res =  await API_liveKit.singleCall(data);
				this.roomTag = res.data.tag;
				this.roomToken = res.data.token;
				this.noticeTxt = "等待对方接听中...";
				
				livekit_main_implementation(this);
				console.log('singleCall',res);
			}else{
				this.isPlayer = false;
				this.camera = this.type == 'videod';
				this.rtcType = this.type == 'videod'?'video' :'voiced'
				// 响铃
				await API_liveKit.singleRing({targetId:this.chatId});
			}
		},
		async cancleBtn(){
			let time = this.$refs.timer&&this.$refs.timer.ti
			// 我是拨打方未接通-取消通话
			if(this.isPlayer&&!this.palyingEnd){
				await API_liveKit.singleCancel({targetId:this.chatId});
			// 我是拨打方，接通电话，挂断
			}else if(this.isPlayer&&this.palyingEnd){
				await API_liveKit.singleFinish({targetId:this.chatId,roomTag:this.roomTag});
			// 我是接受方，未接通-拒绝通话
			}else if(!this.isPlayer&&!this.palyingEnd){
				await API_liveKit.singleRegect({targetId:this.chatId});
			// 我是接受方，接通-挂断
			}else if(!this.isPlayer&&this.palyingEnd){
				await API_liveKit.singleFinish({targetId:this.chatId,roomTag:this.roomTag});
			}
			stopMeetting();
			return core.back()
		},
		
		otherHangUp(){
			return;
			
			let time = this.$refs.timer&&this.$refs.timer.ti
			stopMeetting();
			return core.back();
		},
		async sureBtn(){
			let res = await API_liveKit.singleAccept({targetId:this.chatId,roomTag:this.roomTag});
			console.log(res);
			// 进入通话
			this.palyingEnd = true;
			this.roomToken = res.data;
			livekit_main_implementation(this);
		},
		// 麦克风
		handleMic(){
			closeMeettingMic(2,(mute)=>{
				this.microphone = mute;
			})
		},
		// 视频控制
		handleCamrea(){
			closeMeettingCamera((mute)=>{
				this.camera = mute;
				console.log(mute);
			})
		},
		
		
		
		liveKitInit(){
			uni.$off('liveKitSingleRegect');
			uni.$off('liveKitSingleCancel');
			uni.$off('liveKitSingLing');
			uni.$off('liveKitAccept');
			uni.$off('liveKitSinglehangUp');
			
			uni.$on('liveKitSingleRegect',()=>{
				core.toast('对方已取消')
				stopMeetting();
				core.back()
			})
			uni.$on('liveKitSingleCancel',()=>{
				core.toast('对方已拒绝')
				stopMeetting();
				core.back()
			})
			uni.$on('liveKitSingLing',()=>{
				// 对方已经响铃
				this.noticeTxt = "对方已响铃，等待接听"
			})
			uni.$on('liveKitAccept',()=>{
				// 对方已经接受
			})
			uni.$on('liveKitSingleBusy',()=>{
				// 对方正忙
				core.toast('对方正忙')
				stopMeetting();
				return core.back();
			})
			uni.$on('liveKitSinglehangUp',()=>{
				let time = this.$refs.timer&&this.$refs.timer.ti
				// 对方正忙
				stopMeetting();
				return core.back();
			})
			
			
		}
	}
}
</script>

<style lang="scss" scoped>
.btn-icon{
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 40rpx;
	font-size: 40rpx;
}	
	

.container{
	background-color: grey;
	width: 100vw;
	height: 100vh;
	position: relative;
	.u-info{
		position: absolute;
		flex-direction: column;
		top: 250rpx;
		left: 0;
		right: 0;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		.u-name{
			padding-top: 50rpx;
		}
	}
	.operate-box{
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
		.time-box{
			text-align: center;
			color: white;
			font-size: 40rpx;
		}
		.op-box{
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
	.otherVideo{
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden !important;
		flex-direction: column;
		justify-content: center;
		video{
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
		}
	}
	.myVideo{
		position: absolute;
		width: 200rpx;
		height: 400rpx;
		right: 50rpx;
		top: 50rpx;
		display: flex;
		overflow: hidden !important;
		flex-direction: column;
		justify-content: center;
		video{
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
		}
	}
}
</style>